PnP-JS-Core: Get basic information of SharePoint List

PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

PnP JavaScript Core library is a open source library and it is still evolving by the community contributions and this article written, based on library version 1.0.2. This library is depends mostly on SharePoint REST API, so what ever result we received, all of them returned by the REST API response.

In this article,

we will write a code snippet to get the basic list information dynamically by using PnP JavaScript code.

To run the PnP javascript code, we have to add references for some dependency files are pnp.js, fetch.js and promise.js.

Example:

The below steps and code snippet are used to display the basic list properties with values for the given list,

1. Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
   • Download pnp.js  PnP JS file
   • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
   • Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
2. Create new web part page and insert Content Editor web part
3. Create a sample.html file in Site Assets or Style library and insert the below code snippet

   [code language=”javascript”]
   <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
   <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
   <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>

   <div id="sample"></div>

   <script type="text/javascript">

   $pnp.sp.web.lists.getByTitle(‘<List Name>’).get().then(function(result) {
   var lstInfo = "";
   //key refers the List Property and
   //property[key] returns the value for that proeprty
   for (var key in result)
   lstInfo += k + " – " + result[k] + ‘<br/>’;

   document.getElementById("sample").innerHTML = lstInfo;

   });
   </script>
   [/code]

4. Add the URL of sample.html file to the content editor web part
5. Click ok to apply the changes to the web part and save the page.
6. Now the page displays a basic list information based on given SharePoint List using PnP JavaScript method .

Based on the Office 365, we will get the values for the below List properties,

• odata.metadata
• odata.type
• odata.id
• odata.etag
• odata.editLink
• AllowContentTypes
• BaseTemplate
• BaseType
• ContentTypesEnabled
• CrawlNonDefaultViews
• Created
• CurrentChangeToken
• CustomActionElements
• DefaultContentApprovalWorkflowId
• Description
• Direction
• DocumentTemplateUrl
• DraftVersionVisibility
• EnableAttachments
• EnableFolderCreation
• EnableMinorVersions
• EnableModeration
• EnableVersioning
• EntityTypeName
• FileSavePostProcessingEnabled
• ForceCheckout
• HasExternalDataSource
• Hidden
• Id
• ImageUrl
• IrmEnabled
• IrmExpire
• IrmReject
• IsApplicationList
• IsCatalog
• IsPrivate
• ItemCount
• LastItemDeletedDate
• LastItemModifiedDate
• ListItemEntityTypeFullName
• MajorVersionLimit
• MajorWithMinorVersionsLimit
• MultipleDataList
• NoCrawl
• ParentWebUrl
• ParserDisabled
• ServerTemplateCanCreateFolders
• TemplateFeatureId
• Title